Project Lead

Project roadmap, organizing project and keeping everyone on track, communication with client, leading meetings, mood boarding, user persona, conducting surveys and interviews, research ideation, design ideation, paper wireframes, mid-fi wireframes, prototyping, usability testing and mockups

We audited 2 direct and 5 indirect competitors. The two direct competitors were local nonprofits in Springfield. The 5 indirect competitors were other similar organizations we found around the world. 

We conducted a user survey and user interviews to get a better sense of how users view the existing website and double check our own biases. We were surprised to find that some user liked the current website and did not find the navigation difficult, however, majority had a number of issues with the current design. Above is the affinity diagram we used to analyze the results. 

We discovered three main pain points from the surveys and interviews we conducted.

We created a user personas for each main type of user: volunteer, participant, and donor. This exercise helped us put ourselves in each of the user's perspective. Below is the participant user persona: 

We created a user journey maps for each main type of user: volunteer, participant, and donor. Below is the user journey map for the volunteer persona as they search for more information about Camp Atwater on the Urban League website:

We created a user flow for each main type of user: volunteer, participant, and donor. This exercise helped us think through how each user type would navigate the website. Below is the participant user flow: 

After creating the user flows, we conducted a MoSCoW method for each user type to help us prioritize what content should be on the website. Below is the participant user MoSCoW Method exercise: 

From the MoSCoW method, we chose which items we wanted in the navigation bar and then tested it through a card sorting exercise. We had users place each item under the topic they thought it should go. We then compiled our data (below) and used it to create a preliminary information architecture.  

From information we gained from the user flows, MoSCoW method, and card sorting exercise, we built version one of our information architecture.

​​​​​​​

After our first usability study, we revised the information architecture based on user feedback. Primarily, we changed the dropdown title of “work” to “programs” so navigation would be more intuitive.

The design team participated in a Crazy Eights exercise to help brainstorm ideas for each primary page of the website. We each sketched eight ideas for each page. Below are my Crazy Eight exercises. 

We included a CTA at the top of most of the pages to encourage more interaction with the site. Since excess scrolling is an issue on the existing site, we used pills to condense information. We also added navigation cues such as suggested pages, breadcrumbs, and links in the footer. 

We used larger drop down menus in order to avoid a double drop down menu which is harder to navigate. This option also allows us to include a short description for each page. 

To prepare for usability testing, the I created a mid-fidelity prototype that connected all of the mid-fidelity wireframes.